<template>
  <div>
    <div style="overflow-x: scroll; overflow-y: hidden;">
      <VisGridLayout :layout="layout" :static="static" ref="layoutRef" :width="screenWidthFull ? '100%':'1920px'">
        <!-- <div slot="map">
          <Map1 />
        </div> -->
        <Head1 slot="0" />
        <Box1 slot="1" title="标题一">
          <template slot="center">
            <EchartBar :data="barData1" :dataZoomNumber="4" height="100%" />
          </template>
        </Box1>
        <Box1 slot="6" title="标题二">
          <template slot="center">
            <Seamless2 height="100%" />
          </template>
        </Box1>
        <Box1 slot="2" title="标题三">
          <template slot="center">
            <EchartLineA height="100%" />
          </template>
        </Box1>
        <Box1 slot="7" title="标题四">
          <template slot="center">
            <EchartLineA height="100%" />
          </template>
        </Box1>
        <Count1 slot="3" />
        <EchartMapD slot="4" height="100%" />
      </VisGridLayout>
    </div>
    <div class="tools">
        <a-button type="primary" @click="static = !static">{{static ? '编辑':'退出编辑'}}</a-button>
        <a-button type="primary" @click="add">添加</a-button>
        <a-button type="primary" @click="screenChange()">{{screenWidthFull ? '固定宽度':'自适应宽度'}}</a-button>
    </div>
    {{ layout }}
  </div>
</template>

<script>
import Head1 from "@/views/comps/components/head1";
import Box1 from '@/views/comps/components/box1'
import EchartMapD from '@/components/echarts/echart_mapD'
import EchartBar from '@/components/echarts/echart_bar'
import Count1 from '@/views/comps/components/count1'
import Seamless2 from '@/views/comps/components/seamless2'
import EchartLineA from '@/components/echarts/echart_lineA'
import Map1 from '@/views/comps/components/map1'

export default {
  components: {
    Head1,
    Box1,
    EchartMapD,
    EchartBar,
    Count1,
    Seamless2,
    EchartLineA,
    Map1,
  },
  props: {},
  data() {
    return {
      static: true,
      layout: 
[ { "x": 0, "y": 0, "w": 192, "h": 9.5, "i": "0", "moved": false }, { "x": 2, "y": 15, "w": 43, "h": 44, "i": "1", "moved": false }, { "x": 147, "y": 15, "w": 43, "h": 44, "i": "2", "moved": false }, { "x": 49, "y": 15, "w": 94, "h": 8, "i": "3", "moved": false }, { "x": 57, "y": 29, "w": 78, "h": 61, "i": "4", "moved": false }, { "x": 2, "y": 61, "w": 43, "h": 39, "i": 6, "moved": false }, { "x": 147, "y": 61, "w": 43, "h": 39, "i": 7, "moved": false } ]      
      
      ,
      screenWidthFull: false,
      barData1: {
          xAxis: ['2022年\n09-01', '2022年\n09-02', '2022年\n09-03', '2022年\n09-04', '2022年\n09-05', '2022年\n09-06', '2022年\n09-07', '2022年\n09-08', '2022年\n09-09', '2022年\n09-10'],
          yAxis: {
              name: '单位：次'
          },
          barWidth: "25%",
          barGap: "30%",
          series:[{
              type: "bar",
              name: 'API服务',
              data: [250, 150, 170, 150, 156, 267, 110, 50, 75, 99],
              color: ["#1D93FF", "#82C4FF"]
          }]
      },
    };
  },
  methods: {
    add() {
      this.$refs.layoutRef.add()
    },
    screenChange() {
      this.screenWidthFull = !this.screenWidthFull
    }
  },
};
</script>

<style lang="less" scoped>
.tools{
    padding: 10px 0;
    text-align: center;

    .ant-btn + .ant-btn {
        margin-left: 10px;
    }
}

.vue-grid-layout {
  background: url('~@/assets/images/background/vis_bg2.png') no-repeat center !important;
}
</style>